<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BV号转AV号</title>
  <style>
    html {
      width: 100%;
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: url("./bg.jpg") no-repeat fixed center center / cover;
    }
    input, button {
      font-size: 18px;
    }
    input:focus {
      outline: none;
    }
    body, .base {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .base {
      flex-direction: column;
      position: relative;
      border: 2px solid #FFF;
      border-radius: 20px;
      padding: 100px;
      box-shadow: 0 0 20px 20px #FFF inset;
      z-index: 1;
    }
    .base::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 0; right: 0;
      background: url("./bg.jpg") no-repeat fixed center center / cover;
      filter: blur(8px);
      border-radius: 20px;
      z-index: -1;
    }
    .title {
      margin-bottom: 60px;
      color: #000;
      text-shadow: 0 0 8px #FFF;
      font-size: 36px;
    }
    .title > .tip {
      font-size: 14px;
      color: #F00000;
    }
    .content {
      display: flex;
      justify-content: center;
      align-items: stretch;
      margin: 10px 0;
      padding: 10px;
    }
    .copyright div {
      color: #000;
      text-shadow: 0 0 8px #FFF;
    }
    .copyright a {
      color: deepskyblue;
      text-shadow: 0 0 10px #000;
    }
  </style>
</head>
<body>
<div class="base">
  <div class="title">
    <div>Bilibili BV号转AV号</div>
    <div class="tip">*需要浏览器支持ES6*</div>
  </div>

  <div class="content decode-content">
    <input id="dec-inp" class="input" type="text" placeholder="输入bv号">
    <button id="decode">解码到av号</button>
    <input type="text" id="dec-res">
  </div>

  <div class="content encode-content">
    <input id="enc-inp" class="input" type="text" placeholder="输入av号">
    <button id="encode">编码到bv号</button>
    <input type="text" id="enc-res">
  </div>

  <div class="content copyright">
    <div>算法来源</span>
    <div><a href="https://www.zhihu.com/question/381784377/answer/1099438784">https://www.zhihu.com/question/381784377/answer/1099438784</a></div>
  </div>
</div>

<script>
var table = "fZodR9XQDSUm21yCkr6zBqiveYah8bt4xsWpHnJE7jL5VG3guMTKNPAwcF";
var tr = {};

for (var i = 0; i < 58; ++i) {
  tr[table[i]] = i;
}

var s = [11, 10, 3, 8, 4, 6, 2, 9, 5, 7];
var xor = 177451812;
var add = 8728348608;

//bv2av
function dec(x) {
  var r = 0;
  for (var i = 0; i < 6; ++i) {
    r += tr[x[s[i]]] * 58 ** i;
  }
  return "av" + String((r - add) ^ xor);
}

//av2bv
function enc(x) {
  var x_ = (x ^ xor) + add;
  var r = ["B", "V", "1", , , "4", , "1", , "7"];

  for (var i = 0; i < 6; ++i) {
    r[s[i]] = table[Math.floor(x_ / 58 ** i) % 58];
  }
  return r.join("");
}
</script>
<script>
const decInput = document.querySelector("#dec-inp");
const encInput = document.querySelector("#enc-inp");
const decBtn = document.querySelector("#decode");
const encBtn = document.querySelector("#encode");
const decRes = document.querySelector("#dec-res")
const encRes = document.querySelector("#enc-res")

decBtn.onclick = () => {
  const input = String(decInput.value)
  const arr = ["bv","Bv","bV","BV"]
  if(arr.some(item => input.startsWith(item))) {
    console.log(`true: ${input}`)
    decRes.value = dec(input)
  } else {
    console.log(`false: ${input}`)
    decRes.value = dec("bv"+input)
  }
}

encBtn.onclick = () => {
  const input = String(encInput.value)
  const arr = ["av","Av","aV","AV"]
  if(arr.some(item => input.startsWith(item))) {
    console.log(`true: ${input}`)
    encRes.value = enc(input.substring(2))
  } else {
    console.log(`false: ${input}`)
    encRes.value = enc(input)
  }
}
</script>
</body>
</html>